import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../controller.dart';

/// 悬浮毛玻璃底部导航栏
/// 
/// 一个具有毛玻璃效果的现代化底部导航栏组件
/// 支持动画效果、点击反馈和选中状态展示
class FloatingBottomNavigationBar extends GetView<MainController> {
  const FloatingBottomNavigationBar({super.key});

  /// 导航项数据配置
  /// 包含图标、激活图标、标签信息
  static const List<Map<String, dynamic>> _navItems = [
    {'icon': Icons.science_outlined, 'activeIcon': Icons.science, 'label': '测试'},
    {'icon': Icons.explore_outlined, 'activeIcon': Icons.explore, 'label': '发现'},
    {'icon': Icons.home_outlined, 'activeIcon': Icons.home, 'label': '首页'},
    {'icon': Icons.message_outlined, 'activeIcon': Icons.message, 'label': '消息'},
    {'icon': Icons.person_outline, 'activeIcon': Icons.person, 'label': '我的'},
  ];

  @override
  Widget build(BuildContext context) {
    return Positioned(
      left: 20,
      right: 20,
      bottom: 30,
      child: Obx(() => _buildNavigationContainer()),
    );
  }

  /// 构建导航栏容器
  Widget _buildNavigationContainer() {
    return Container(
      height: 80,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(25),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.1),
            blurRadius: 20,
            offset: const Offset(0, 8),
          ),
        ],
      ),
      child: _buildGlassEffect(),
    );
  }

  /// 构建毛玻璃效果
  Widget _buildGlassEffect() {
    return ClipRRect(
      borderRadius: BorderRadius.circular(25),
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 15, sigmaY: 15),
        child: Container(
          decoration: BoxDecoration(
            color: Colors.white.withOpacity(0.8),
            borderRadius: BorderRadius.circular(25),
            border: Border.all(
              color: Colors.white.withOpacity(0.2),
              width: 1,
            ),
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: _buildNavigationItems(),
          ),
        ),
      ),
    );
  }

  /// 构建所有导航项
  List<Widget> _buildNavigationItems() {
    return _navItems.asMap().entries.map((entry) {
      final index = entry.key;
      final item = entry.value;
      final isSelected = controller.currentIndex.value == index;

      return _buildNavigationItem(
        index: index,
        item: item,
        isSelected: isSelected,
      );
    }).toList();
  }

  /// 构建单个导航项
  Widget _buildNavigationItem({
    required int index,
    required Map<String, dynamic> item,
    required bool isSelected,
  }) {
    return Expanded(
      child: Material(
        color: Colors.transparent,
        child: InkWell(
          onTap: () => controller.onBottomNavTap(index),
          borderRadius: BorderRadius.circular(16),
          splashColor: Colors.blue.shade100.withOpacity(0.3),
          highlightColor: Colors.blue.shade50.withOpacity(0.2),
          child: _buildAnimatedItemContent(item, isSelected),
        ),
      ),
    );
  }

  /// 构建动画内容
  Widget _buildAnimatedItemContent(
    Map<String, dynamic> item, 
    bool isSelected,
  ) {
    return AnimatedContainer(
      duration: const Duration(milliseconds: 200),
      curve: Curves.easeInOut,
      padding: const EdgeInsets.symmetric(vertical: 4),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          _buildAnimatedIcon(item, isSelected),
          const SizedBox(height: 2),
          _buildAnimatedLabel(item, isSelected),
        ],
      ),
    );
  }

  /// 构建动画图标
  Widget _buildAnimatedIcon(
    Map<String, dynamic> item, 
    bool isSelected,
  ) {
    return AnimatedContainer(
      duration: const Duration(milliseconds: 200),
      padding: const EdgeInsets.all(3),
      decoration: BoxDecoration(
        color: isSelected 
            ? Colors.blue.shade100.withOpacity(0.8)
            : Colors.transparent,
        borderRadius: BorderRadius.circular(12),
      ),
      child: Icon(
        isSelected 
            ? item['activeIcon'] as IconData 
            : item['icon'] as IconData,
        color: isSelected 
            ? Colors.blue.shade700 
            : Colors.grey.shade600,
        size: isSelected ? 24 : 22,
      ),
    );
  }

  /// 构建动画标签
  Widget _buildAnimatedLabel(
    Map<String, dynamic> item, 
    bool isSelected,
  ) {
    return AnimatedDefaultTextStyle(
      duration: const Duration(milliseconds: 200),
      style: TextStyle(
        fontSize: isSelected ? 10 : 9,
        fontWeight: isSelected ? FontWeight.w600 : FontWeight.w500,
        color: isSelected 
            ? Colors.blue.shade700 
            : Colors.grey.shade600,
      ),
      child: Text(item['label'] as String),
    );
  }
}
